<template>
  <div id="Home">
    <div id="search" @click="close_tankaung">
      <el-row align="middle">
        <el-col :span="12">
          <el-row align="middle">
            <el-col :span="3"><img :src="companyAvtar" class="touxiang" alt=""></el-col>
            <el-col :span="17">
              <div><span class="title">{{ companyName }}</span></div>
              <div class="about">{{ companyCode }}</div>
            </el-col>
            <el-col :span="4" style="margin-top: 16px">
              <div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="1">
          <div class="border_right"></div>
        </el-col>
        <el-col :span="11">
          <div class="search setting">
            <!--                        <span>搜索</span>-->
            <!--                        <el-input placeholder="请输入客户手机号或姓名或产品编号" suffix-icon="el-icon-search"></el-input>-->
            <p style="color: #2D2D2D;font-size: 14px;">{{ msg_title }}</p>
            <p style="float: right;margin-top: -70px;color: #4E4E4E">{{ msg_time }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false"
    >
      <div class="mc-drawer">
        <div class="mcd-top">
          <span></span>
          <span>账号设置</span>
        </div>
        <h1>基本信息</h1>
        <div>
          <p>登录账号</p>
          <el-input v-model="username" placeholder="请输入您的真实姓名" disabled="disabled"/>
        </div>
        <p class="mcd-btn" @click="updateset">保存</p>
      </div>
    </el-drawer>

    <el-drawer title="团定订单" :visible.sync="groupOrderDrawer" :with-header="false" size="40%" class="group-order-drawer">
      <group-order-drawer v-if="groupOrderDrawer"/>
    </el-drawer>

    <div class="contents">
      <ul>
        <li @click="home_mianliao">
          <img src="@/assets/img/u57.png" width="116" height="116" alt="">
          <span class="home_title">面料下单</span>
        </li>
        <li @click="user_order"><img src="@/assets/img/u49.png" width="116" height="116" alt=""><span
            class="home_title">个定下单</span></li>
        <li @click="home_teamorder"><img src="@/assets/img/u53.png" width="116" height="116" alt=""><span
            class="home_title">团体下单</span></li>
        <li @click="home_xianhuo"><img src="@/assets/img/u115.png" width="116" height="116" alt=""><span
            class="home_title">现货下单</span></li>
        <li @click="home_myorder"><img src="@/assets/img/u73.png" width="116" height="116" alt=""><span
            class="home_title">我的订单</span></li>
        <li @click="home_myafter"><img src="@/assets/img/u81.png" width="116" height="116" alt=""><span
            class="home_title">我的售后</span></li>
        <li @click="home_baobiao" v-show="this.identity==2"><img src="@/assets/img/u77.png" width="116" height="116"
                                                                 alt=""><span class="home_title">我的报表</span></li>
        <li @click="home_mycompany" v-show="this.identity==2"><img src="@/assets/img/u65.png" width="116" height="116"
                                                                   alt=""><span class="home_title">我的公司</span></li>
        <li @click="home_chongzhi" v-show="this.identity==2"><img src="@/assets/img/u61.png" width="116" height="116"
                                                                  alt=""><span class="home_title">我的账户</span></li>
        <li @click="home_qiugou" v-show="this.identity==2"><img src="@/assets/img/u119.png" width="116" height="116"
                                                                alt=""><span class="home_title">产品求购</span></li>
        <!--                <li @click="user_order"><img src="@/assets/img/u81.png" width="116" height="116" alt=""><span>我的返修</span></li>-->
        <!--                <li @click="user_order"><img src="@/assets/img/u69.png" width="116" height="116" alt=""><span>我的客户</span></li>-->

      </ul>
    </div>
    <div class="zhezhao" :class="menuOpen" @click="toggle"></div>
    <div style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: rgb(0,0,0,0.5);" v-show="show"
         @click="close_tankuang"></div>
    <div id="CreateOrder" :class="menuOpen" v-loading="loading">
      <div class="title">创建订单
        <a><p @click="close_tankuang" style="color: #2d2d2d;font-size: 15px;font-weight: bold;float: right">关闭</p></a>
      </div>
      <ul class="button">
        <!-- <li><router-link to="/order_user"><img src="@/assets/img/icon1.png" width="" alt=""><span>创建新订单</span></router-link></li> -->
        <li @click="createUserOrder"><img src="@/assets/img/icon1.png" width="" alt=""><span>创建新订单</span></li>
        <li><img src="@/assets/img/u80.png" width="" alt="" @click="go_copyorder"><span>复制订单</span></li>
      </ul>
      <div>
        <el-tabs v-model="activeName" class="tabstable" @tab-click="paneClick">
          <el-tab-pane label="编辑中订单" name="编辑中订单">
            <el-table :data="tableData" style="width: 100%" :border="true"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}">
              <el-table-column prop="id" label="序号" width="50"></el-table-column>
              <el-table-column prop="kuhuName" label="顾客姓名"></el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column prop="updateTime" label="更新时间"></el-table-column>
              <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                  <el-button @click="Edit(scope.row.orderSn,2)" type="text" size="mini">继续填写</el-button>
                  <el-button @click="Delete(scope.$index,scope.row.orderSn,2)" type="text" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-if="tableData.length" background layout="prev, pager, next" :total="pageTotal"
                           :current-page.sync="pageNo" :page-size="pageSize" @current-change="pageChangePage"
                           style="padding-top: 20px;text-align: center;"></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="我的模版" name="我的模版">
            <el-table :data="tableData2" style="width: 100%" :border="true"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}" v-show="identity != 3">
              <el-table-column prop="id" label="序号" width="50"></el-table-column>
              <el-table-column prop="templateName" label="模板名称">
                <template slot-scope="props">
                  <span
                      v-if="props.row.templateName == null || props.row.templateName == '' || props.row.templateName == 'undefined'"
                      size="small">
                    个订模板
                  </span>
                  <span v-else>
                    {{ props.row.templateName }}
                  </span>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column prop="createTime" label="更新时间"></el-table-column>
              <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                  <el-button @click="UseTemplate(scope.row.orderSn)" type="text" size="mini">使用模板</el-button>
                  <el-button @click="Edit(scope.row.orderSn,1)" type="text" size="mini">编辑</el-button>
                  <el-button @click="Delete(scope.$index,scope.row.orderSn,1)" type="text" size="mini">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination v-show="identity != 3" v-if="tableData.length" background layout="prev, pager, next"
                           :total="pageTotal" :current-page.sync="pageNo" :page-size="pageSize"
                           @current-change="pageChangePage"
                           style="padding-top: 20px;text-align: center;"></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="铭朗云模版" name="铭朗云模版">
            <el-table :data="tableData3" style="width: 100%" :border="true"
                      :header-cell-style="{'text-align':'center'}"
                      :cell-style="{'text-align':'center'}">
              <el-table-column prop="id" label="序号" width="50"></el-table-column>
              <el-table-column prop="templateName" label="模板名称"></el-table-column>
              <el-table-column prop="createTime" label="创建时间"></el-table-column>
              <el-table-column prop="createTime" label="更新时间"></el-table-column>
              <el-table-column label="操作" width="110">
                <template slot-scope="scope">
                  <el-button @click="UseTemplate(scope.row.orderSn)" type="text" size="mini">使用模板</el-button>
                </template>
              </el-table-column>
              <el-pagination v-if="tableData.length" background layout="prev, pager, next" :total="pageTotal"
                             :current-page.sync="pageNo" :page-size="pageSize" @current-change="pageChangePage"
                             style="padding-top: 20px;text-align: center;"></el-pagination>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import $ from 'jquery';
import axios from 'axios';
// eslint-disable-next-line no-unused-vars
import {getAction, postAction} from '@/api/manage'
import Qs from "qs";
//引入组件
import groupOrderDrawer from '@/views/group-order/components/group-order-drawer';

export default {
  components: {
    groupOrderDrawer
  },
  data() {
    return {
      loading: false,
      msg_title: '暂无新消息',
      msg_time: '',
      identity: 2,
      companyName: '',
      companyCode: '',
      companyAvtar: '',
      drawer: false,
      groupOrderDrawer: false,
      username: "",
      password: "",
      paypassword: "",
      adress: "",
      realname: "",
      searchVal: "",
      url: {
        show_data_token: '/user/interface/query_userInfoBytoken',
        update_user_data: '/user/interface/update_userInfoById',
      },
      menuOpen: 'close',
      activeName: '编辑中订单',
      tableData: [],
      tableData2: [],
      tableData3: [],
      // 分页
      pageTotal: 0, // 总条数
      pageNo: 1,  // 当前页码
      pageSize: 10,  // 页条数
      // 遮罩
      show: false
    }
  },
  created() {
    if (localStorage.getItem("islogin") == '1') {
      window.location.reload();
      localStorage.removeItem("islogin");
    }
    this.show_userinfo();//查询用户信息
    this.getmsgDate();
    // alert(localStorage.getItem("token"))
    // localStorage.setItem('token','eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MDQ0NzU0ODIsInVzZXJuYW1lIjoiMTUwODg0MDk0NjAifQ.FIKKSC8Hb8KSJAHVtZPJrsqpDIo1t2HwVDeMOukT11c');
    this.paneClick()
  },
  mounted() {
    // window.onbeforeunload = function(){//监听浏览器关闭事件
    //     localStorage.removeItem("token");
    //     window.history.go(0);
    // }
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.addEventListener('unload', e => this.unloadHandler(e))

    let oldImg = '';
    $('.contents li').hover(function () {
      let i = $('.contents li').index(this)
      oldImg = $(this).find('img').attr('src');
      switch (i) {
        case 0:
          $(this).find('img').attr('src', require('../assets/img/u57_selected.png'));
          break;
        case 1:
          $(this).find('img').attr('src', require('../assets/img/u49_selected.png'));
          break;
        case 2:
          $(this).find('img').attr('src', require('../assets/img/u53_selected.png'));
          break;
        case 3:
          $(this).find('img').attr('src', require('../assets/img/u115_selected.png'));
          break;
        case 4:
          $(this).find('img').attr('src', require('../assets/img/u73_selected.png'));
          break;
        case 5:
          $(this).find('img').attr('src', require('../assets/img/u81_selected.png'));
          break;
        case 6:
          $(this).find('img').attr('src', require('../assets/img/u77_selected.png'));
          break;
        case 7:
          $(this).find('img').attr('src', require('../assets/img/u65_selected.png'));
          break;
        case 8:
          $(this).find('img').attr('src', require('../assets/img/u61_selected.png'));
          break;
        case 9:
          $(this).find('img').attr('src', require('../assets/img/u119_selected.png'));
          break;
          // case 10: $(this).find('img').attr('src',require('../assets/img/u61_selected.png'));break;
          // case 11: $(this).find('img').attr('src',require('../assets/img/u119_selected.png'));break;
      }
    }, function () {
      $(this).find('img').attr('src', oldImg);
    });
    $('#CreateOrder li:eq(0)').hover(function () {
      $(this).find('img').attr('src', require('../assets/img/icon2.png'));
    }, function () {
      $(this).find('img').attr('src', require('../assets/img/icon1.png'));
    })
    $('#CreateOrder li:eq(1)').hover(function () {
      $(this).find('img').attr('src', require('../assets/img/u80_selected.png'));
    }, function () {
      $(this).find('img').attr('src', require('../assets/img/u80.png'));
    })
  },
  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
    window.removeEventListener('unload', e => this.unloadHandler(e))
  },
  methods: {
    // pane切换触发事件
    paneClick(tab) {
      // console.log(tab.name);
      this.pageTotal = 0
      this.pageNo = 1
      this.pageSize = 10
      if (this.activeName == '编辑中订单') {
        this.editTableData()
      } else if (this.activeName == '我的模版') {
        this.myTemplate()
      } else if (this.activeName == '铭朗云模版') {
        this.lineTemplate()
      }
    },
    // 编辑中订单
    editTableData() {
      let params = new FormData();
      params.append('token', localStorage.getItem("token"));
      params.append('type', 1);
      params.append('pageNo', this.pageNo);
      params.append('pageSize', this.pageSize);
      this.$http.post('logic/interface/query_orderlistBytype', params).then(async (result) => {
        this.tableData = result.data.data.records;
        this.pageTotal = result.data.data.total;
      });
    },
    // 我的模版
    myTemplate() {
      let params2 = new FormData();
      params2.append('token', localStorage.getItem("token"));
      params2.append('type', 2);
      params2.append('pageNo', this.pageNo);
      params2.append('pageSize', this.pageSize);
      this.$http.post('logic/interface/query_orderlistBytype', params2).then(async (result) => {
        this.tableData2 = result.data.data.records;
      });
    },
    // 铭朗云模版
    lineTemplate() {
      let params3 = new FormData();
      params3.append('token', localStorage.getItem("token"));
      params3.append('type', 3);
      params3.append('pageNo', this.pageNo);
      params3.append('pageSize', this.pageSize);
      this.$http.post('logic/interface/query_orderlistBytype', params3).then(async (result) => {
        this.tableData3 = result.data.data.records;
      });
    },
    // 统一分页触发事件
    pageChangePage(index) {
      this.pageNo = index;
      // 触发事件方法函数
      if (this.activeName == '编辑中订单') {
        this.editTableData()
      } else if (this.activeName == '我的模版') {
        this.myTemplate()
      } else if (this.activeName == '铭朗云模版') {
        this.lineTemplate()
      }
    },
    beforeunloadHandler() {
      this._beforeUnload_time = new Date().getTime();
    },
    unloadHandler(e) {
      this._gap_time = new Date().getTime() - this._beforeUnload_time;
      debugger
      //判断是窗口关闭还是刷新
      if (this._gap_time <= 8) {
        //如果是登录状态，关闭窗口前，移除用户
        localStorage.removeItem("token");
        window.history.go(0);
      }
    },
    close_tankaung() {
      this.menuOpen = 'close';
    },
    getmsgDate() {//最新消息
      let params2 = {
        token: localStorage.getItem("token")
      };
      postAction(domain.publicUrl + "/logic/interface/query_mymessage", Qs.stringify(params2)).then(res => {
        let result = res.data;
        if (result.code == 0) {
          if (result.data != undefined && result.data.length > 0) {
            this.msg_title = result.data[0].title;
            this.msg_time = result.data[0].createTime;
          } else {
            this.msg_title = '暂无最新消息';
            this.msg_time = '';
          }
        }
      });
    },
    show_userinfo() {
      let autohor_token = localStorage.getItem("token");
      let params = {token: autohor_token};
      postAction(domain.publicUrl + this.url.show_data_token, Qs.stringify(params)).then(res => {
        let result = res.data;
        console.log(result)
        if (result.code == 0) {
          this.companyName = result.data.companyName;
          this.companyCode = result.data.companyCode;
          this.companyAvtar = result.data.companyAvatar;
          //弹框里面的值
          this.username = result.data.username;
          this.password = result.data.showpwd;
          this.paypassword = result.data.payPassword;
          this.adress = result.data.address;
          this.realname = result.data.realname;
          this.identity = result.data.identity;
        } else {
          // this.$message.error(result.msg)
          this.$router.replace({
            path: '/login',
            name: 'login'
          })
        }
      })
    },
    updateset() {
      let autohor_token = localStorage.getItem("token");
      let params = {
        token: autohor_token,
        username: this.username,
        password: this.password,
        payPassword: this.paypassword,
        address: this.adress,
        realname: this.realname
      };
      postAction(domain.publicUrl + this.url.update_user_data, Qs.stringify(params)).then(res => {
        let result = res.data;
        console.log(result)
        if (result.code == 0) {
          this.$message.success("修改成功！")
          this.drawer = false;
          this.show_userinfo();//查询用户信息
        } else {
          this.$message.error(result.msg)
        }
      })
    },
    home_mianliao() {
      this.$router.push({path: '/store'});
    },
    home_teamorder() {
      // this.$message.error("系统正在开发中...")
      this.groupOrderDrawer = true;
      // this.$router.push({path:'/group-order/'});
    },
    home_myorder() {
      this.$router.push({path: '/my-order'});
    },
    home_qiugou() {
      this.$router.push({path: '/ask-buy'});
    },
    home_myafter() {
      this.$router.push({path: '/my-afterorder'});
    },
    home_xianhuo() {
      // this.$message.error("系统正在开发中，此版块暂未开通...")
      this.$router.push({path: '/goodsStore'});
    },
    home_baobiao() {
      this.$router.push({path: '/my-statement'});
    },
    home_mycompany() {
      this.$router.push({path: '/my-company'});
    },
    home_chongzhi() {
      this.$router.push({path: '/game-guide'});
    },
    go_copyorder() {//进入复制订单
      this.show = false
      this.$router.push({path: '/copyMysingleorder'});
    },
    toggle() {
      this.menuOpen = this.menuOpen == 'open' ? 'close' : 'open';
    },
    close_tankuang() {
      this.show = false
      this.menuOpen = 'close';
    },
    user_order() {
      this.show = true
      this.menuOpen = 'open';
    },
    goItemPage(item) {
      if (item.sign == 'applist0003') {
        this.groupOrderDrawer = true;
      } else {
        this.$router.push(item.link);
      }
    },
    createUserOrder() {
      if (this.$store.state.OrderUser.Order_user_Info_temp.bodySizeIds != null && this.$store.state.OrderUser.Order_user_Info_temp.bodySizeIds != '') {
        this.$store.state.OrderUser.Order_user_Info_temp.bodySizeIds = '';
      }
      this.show = false
      let params = new FormData();
      params.append('token', localStorage.getItem("token"));
      // alert(localStorage.getItem("token"))
      this.$http.post('logic/interface/create_sign_order', params).then((result) => {
        params.append('orderSn', result.data.order_sn)
        //创建订单时保存一下订单编号
        // if(localStorage.getItem("singOrderSn")!=null && localStorage.getItem("singOrderSn") != ''){
        //   localStorage.removeItem("singOrderSn");
        // }
        // localStorage.setItem("singOrderSn", result.data.order_sn);
        let templateSn = result.data.template_sn;
        this.$http.post('/fabricAndOther/getDingleOrderDetail', params).then((res) => {
          this.$store.state.OrderUser.Order_user_InfoData = res.data.data
          this.$store.state.OrderUser.Order_user_InfoData.token = localStorage.getItem("token");
          this.$store.state.OrderUser.Order_user_Info_temp.templateSn = templateSn;
          this.$store.state.OrderUser.isType = 0;
          this.$store.dispatch('addOrderUser');
          this.$router.push({path: '/order_user/index'});
        });
      });
    },
    Delete(index, order_sn, type) {
      //单删
      if (confirm('确认要删除吗？')) {
        let p1 = new FormData();
        p1.append('token', localStorage.getItem("token"));
        p1.append('order_sn', order_sn);
        p1.append('type', type);
        this.$http.post('logic/interface/deleteBytype', p1).then((res) => {
          if (type == 2) {
            this.tableData.splice(index, 1);
          } else {
            this.tableData2.splice(index, 1);
          }
        });
      }
    },
    Edit(id, type) {
      this.loading = true;
      this.show = false;
      let params = new FormData();
      params.append('token', localStorage.getItem("token"));
      params.append('orderSn', id);
      if (type == 2) {//订单
        this.$http.post('/fabricAndOther/getDingleOrderDetail', params).then((res) => {
          if (res.data.code == 0) {
            this.$store.state.OrderUser.Order_user_InfoData = res.data.data;
            this.$store.state.OrderUser.Order_user_InfoData.token = localStorage.getItem("token");
            this.$store.state.OrderUser.Order_user_Info_temp.templateSn = res.data.data.productInfoList[0].templateSn;
            this.setImg(res.data.data.productInfoList[0])
            this.$store.state.OrderUser.isType = 0;
            this.$store.state.OrderUser.Order_user_Info_temp.id = res.data.data.productInfoList[0].id;
            //产品信息复位
            this.$store.dispatch('setProductInfo', 0);
            this.$router.push({path: '/order_user/index'});
            this.loading = false;
          } else {
            this.$message.warning("该订单有异常，请删掉重新创建")
            this.loading = false;
          }
        });
      } else if (type == 1) {//我的模板
        this.$store.state.OrderUser.isType = 1;
        this.$http.post('/fabricAndOther/moduleDetail', params).then((res) => {
          this.$store.state.OrderUser.Order_user_InfoData = res.data.data;
          this.$store.state.OrderUser.Order_user_InfoData.token = localStorage.getItem("token");
          this.$store.state.OrderUser.Order_user_Info_temp.templateSn = res.data.data.productInfoList[0].templateSn;
          this.setImg(res.data.data.productInfoList[0])
          this.$store.state.OrderUser.Order_user_Info_temp.id = res.data.data.productInfoList[0].id;
          //产品信息复位
          this.$store.dispatch('setProductInfo', 0);
          this.$router.push({path: '/order_user/index'});
          this.loading = false;
        });
      }

    },
    setImg(data) {
      this.$store.state.OrderUser.Order_user_Info_temp.liangtiImgs = data.liangtiImgs;
      this.$store.state.OrderUser.Order_user_Info_temp.zidingyiImg = data.zidingyiImg;
    },

    UseTemplate(id) {
      this.show = false;
      this.loading = true;
      // alert(localStorage.getItem("token"))
      let params = new FormData();
      params.append('token', localStorage.getItem("token"));
      params.append('templateSn', id);
      this.$http.post('logic/interface/useTemplate_createOrder', params).then((res) => {
        let params2 = new FormData();
        params2.append('token', localStorage.getItem("token"));
        params2.append('orderSn', res.data.order_sn);
        // this.$http.post('fabricAndOther/moduleDetail',params2).then((res) => {
        this.$http.post('/fabricAndOther/getDingleOrderDetail', params2).then((res) => {
          this.$store.state.OrderUser.Order_user_InfoData = res.data.data;
          this.$store.state.OrderUser.Order_user_InfoData.token = localStorage.getItem("token");
          this.$store.state.OrderUser.Order_user_Info_temp.templateSn = res.data.data.productInfoList[0].templateSn;
          //产品信息复位
          this.$store.dispatch('setProductInfo', 0);
          this.$router.push({path: '/order_user/index'});
          this.loading = false;
          // this.$store.state.OrderUser.Order_user_InfoData = res.data.data;
          // this.$store.state.OrderUser.Order_user_InfoData.token = localStorage.getItem("token");
          // this.$store.state.OrderUser.Order_user_Info_temp.templateSn = res.data.data.productInfoList[0].templateSn;
          // //产品信息复位
          // this.$store.state.isType=0;
          // this.$store.dispatch('setProductInfo',0);
          // this.$router.push({path:'/order_user/index'});
        });
      });
    }
  },
  watch: {
    //使用watch监听，判断弹出框是显示状态或隐藏状态
    show: {
      //布尔类型变量,是否展示弹框
      handler(val) {
        //true:显示弹出框，false：隐藏弹出框
        if (val) {
          document.querySelector('body').setAttribute('style', 'overflow:hidden;')
        } else {
          document.body.removeAttribute('style')
        }
      }
    }
  },
}
</script>

<style lang="scss">
.group-order-drawer {
  .el-drawer__body {
    height: 100%;
    overflow-y: auto;
  }
}
</style>
<style scoped lang="scss">
#Home {
  height: 100%;
}

#search {
  border-radius: 10px;
  padding: 20px 30px;
  background: #ffffff;
}

#search img {
  display: initial;
}

#search .search .el-input {
  width: 80% !important;
  display: inline-block;
  margin-left: 15px;
}

.contents {
  margin: 30px auto;
  width: 80%;
}

.contents ul {
  display: flex;
  flex-flow: wrap;
  width: 100%;
}

.contents ul li {
  width: 200px;
  height: 200px;
  margin: 10px 15px;
  background: #FFFFFF;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.contents ul li:hover {
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.196078431372549);
}

.contents ul li img {
  display: block;
  margin: 28px auto -12px auto;
}

.contents ul li span {
  color: #595959;
  font-weight: bold;
}

.border_right {
  border-left: 1px solid #DADADA;
  height: 80%;
}

#search .title {
  font-size: 16pt;
  margin-right: 10px;
  color: #2D2D2D;
  font-weight: bolder;
  margin-left: 16px;
}

.setting {
  line-height: 60px;
  vertical-align: middle;
}

.about {
  font-size: 12px;
  color: #545454;
  margin-top: 10px;
  margin-left: 16px;
}

#CreateOrder.open {
  transition: all .7s ease-out;
}

#CreateOrder.close {
  right: -700px;
  visibility: hidden;
}

#CreateOrder {
  background: #ffffff;
  width: 600px;
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0px;
  overflow-y: scroll;
  padding: 20px;
  height: 100%;
}

#CreateOrder .title {
  margin: 10px 0 20px 0px;
  border-left: 5px solid #000000;
  padding-left: 15px;
  font-size: 16px;
}

#CreateOrder ul.button {
  display: flex;
  flex-flow: wrap;
  width: 560px;
  border-bottom: 2px dashed $borderColor;
}

#CreateOrder ul.button li {
  text-align: center;
  border: 1px solid;
  border-color: rgb(242, 242, 242);
  border-radius: 5px;
  margin: 0px 15px 15px 0;
  width: 170px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
}

#CreateOrder ul.button li img {
  width: 72px;
  height: 72px;
  display: block;
  margin: 30px auto;
}

#CreateOrder ul.button li:last-child img {
  opacity: 0.26;
}

#CreateOrder ul.button li:last-child:hover img {
  opacity: 1;
}

#CreateOrder ul.button li {
  background: #F3F3F3;
}

#CreateOrder ul.button li:hover {
  background: #4A4A4A;
  color: $color;
}

#CreateOrder ul.button li:hover a {
  color: $color;
}

.tabstable .el-table /deep/ thead tr th {
  background-color: #000000 !important;
  color: $color;
}

.tabstable .el-table /deep/ tbody tr {
  background-color: #f9f9f9 !important;
}

.tabstable .el-table button {
  color: $color;
}

.el-table--border:after,
.el-table--group:after,
.el-table:before {
  background-color: #ffffff;
}

.el-table--border,
.el-table--group {
  border-color: #ffffff;
}

.el-table td,
.el-table th.is-leaf {
  border-bottom: 1px solid #ffffff;
}

.el-table--border th,
.el-table--border th.gutter:last-of-type {
  border-bottom: 1px solid #ffffff;
}

.el-table--border td,
.el-table--border th {
  border-right: 1px solid #ffffff;
}

.touxiang {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-top: -5px;
}

.home_title {
  font-size: 15px;
  color: #2d2d2d;
  font-weight: bolder
}

.mc-drawer {
  box-sizing: border-box;
  padding: 40px;

  .mcd-top {
    display: flex;
    align-items: center;

    span:nth-child(1) {
      display: block;
      width: 6px;
      height: 28px;
      background: #545454;
    }

    span:nth-child(2) {
      font-size: 18px;
      margin-left: 10px;
      font-weight: 600;
      color: #424242;
    }
  }

  .mcd-main {
    margin-top: 50px;

    li {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;

      p:nth-child(1) {
        color: #232222;
        font-weight: 500;
        font-size: 12px;
      }

      p:nth-child(2) {
        color: #333333;
        font-weight: 500;
      }

      p:nth-child(3) {
        color: #d98a2e;
        font-weight: 200;
      }
    }
  }

  .mcd-btn {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    background: #ffe56d;
    border-radius: 3px;
    color: #333;
    font-weight: 600;
    margin-top: 50px;
  }

}
</style>
